<template>
  <!-- 表单 -->
  <div class="popup">
    <el-dialog :visible.sync="dialog" width="70%">
      <el-form :model="form" :rules="rules" class="newdialog" size="mini" ref="dataForm">
        <!-- 基本信息 -->
        <el-card class="form-card" shadow="never">
          <div slot="header">
            <span>基本信息</span>
          </div>
          <el-row :gutter="20">
            <el-col :span="8">
              <el-form-item label="姓名" prop="name">
                <el-input v-model="form.name" class="input" />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="性别">
                <el-select v-model="form.sex">
                  <el-option label="男" value="0"></el-option>
                  <el-option label="女" value="1"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="班级">
                <el-select v-model="form.classId" placeholder>
                  <el-option
                    v-for="item in classlist"
                    :key="item.id"
                    :label="item.className"
                    :value="item.id"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="电话" prop="tel">
                <el-input v-model="form.tel" class="input" />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="身份证">
                <el-input v-model="form.manID" class="input" />
              </el-form-item>
            </el-col>

            <el-col :span="8">
              <el-form-item label="城市">
                <el-cascader
                  v-model="selectCityText"
                  size="mini"
                  :options="cityOptions"
                  @change="handleCityChange"
                />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="宿舍">
                <el-select v-model="form.dormId" clearable placeholder>
                  <el-option
                    v-for="item in dormList"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="入住日期">
                <el-date-picker
                  v-model="form.dormStartTime"
                  value-format="yyyy-MM-dd"
                  type="date"
                  placeholder="选择入住时间"
                />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="离开日期">
                <el-date-picker
                  v-model="form.dormEndTime"
                  value-format="yyyy-MM-dd"
                  type="date"
                  placeholder="选择入住时间"
                />
              </el-form-item>
            </el-col>
          </el-row>
        </el-card>
        <!-- 交费信息开始 -->
        <el-card shadow="never" class="form-card">
          <div slot="header">
            <span>填写报名信息</span>
            <!-- <el-button
              type="primary"
              @click="costFormShow = !costFormShow"
              size="small"
            >{{costFormShow?'关闭交费窗口':'打开交费窗口'}}</el-button>-->
          </div>
          <!-- 交费信息表单 -->
          <el-form :model="costForm" ref="form" label-width="80px" :inline="false" size="mini">
            <el-form-item label="交费类型">
              <el-select v-model="costForm.costType" size="small">
                <el-option label="学费" value="0"></el-option>
                <el-option label="住宿费" value="1"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="金额">
              <el-input-number size="small" v-model="costForm.costValue" :min="0"></el-input-number>
            </el-form-item>
            <el-form-item label="交费时间">
              <el-date-picker
                v-model="costForm.costTime"
                type="datetime"
                size="small"
                value-format="yyyy-MM-dd HH:mm:ss"
                placeholder="选择日期时间"
              ></el-date-picker>
            </el-form-item>
            <el-form-item label="备注">
              <el-input type="textarea" :rows="2" v-model="costForm.costBak"></el-input>
            </el-form-item>
            <div style="float:right; margin-bottom:20px">
              <el-button size="small">取消</el-button>
              <el-button type="primary" size="small" @click="addCostItem">暂存</el-button>
            </div>
          </el-form>
        </el-card>
        <el-card shadow="nerver">
          <!-- 显示已经交费的记录 -->
          <el-table :data="costList" border stripe>
            <el-table-column prop="costType" label="交费类型" width="200">
              <template slot-scope="scope">
                <span>{{ scope.row.costType == '0' ? '学费':'住宿费'}}</span>
              </template>
            </el-table-column>
            <el-table-column prop="costValue" label="金额" width="200"></el-table-column>
            <el-table-column prop="costTime" label="交费时间" width="200"></el-table-column>
            <el-table-column prop="costBak" label="备注"></el-table-column>
            <el-table-column label="操作">
              <template slot-scope="scope">
                <el-button
                  type="text"
                  style="color:red;"
                  size="small"
                  @click="removeCostItem(scope.row.tempId)"
                >删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-card>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialog = false" size="small">取 消</el-button>
        <el-button type="primary" @click="submit" size="small">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { regionData, CodeToText } from "element-china-area-data";

import { newAdd, studentDetail, update } from "@/api/xy/student";
import { dormlist } from "@/api/xy/dorm";

export default {
  name: "newS",
  components: {},
  props: {
    classlist: {
      type: Array,
      required: true
    }
  },
  data() {
    return {
      costList: [],
      costForm: {},
      dormList: [],
      selectCitys: [],
      selectCityText: [],
      cityOptions: regionData,
      dialog: false,
      form: {},
      rules: {
        name: [
          { required: true, message: "请输入姓名", trigger: "blur" },
          { min: 3, max: 10, message: "长度在 3 到 10 个字符", trigger: "blur" }
        ],
        manID: [
          { required: true, message: "请输入身份证号", trigger: "blur" },
          { min: 18, max: 18, message: "身份证不符合规则", trigger: "blur" }
        ],
        sex: [{ required: true, message: "请选择性别", trigger: "change" }],
        classId: [{ required: true, message: "请选择班级", trigger: "change" }],
        dormStartTime: [
          {
            type: "date",
            required: true,
            message: "请选择开始日期",
            trigger: "change"
          }
        ],
        dormEndTime: [
          {
            type: "date",
            required: true,
            message: "请选择结束时间",
            trigger: "change"
          }
        ]
      },
      formLabelWidth: "100px"
    };
  },
  computed: {},
  created() {

  },
  mounted() {},
  methods: {
    removeCostItem(tempId) {
      var i = this.costList.findIndex(el => el.tempId == tempId);
      this.costList.splice(i, 1);
    },
    addCostItem() {
      var newCostForm = {};
      for (var key in this.costForm) {
        newCostForm[key] = this.costForm[key];
      }
      newCostForm.tempID = new Date().getTime();
      this.costList.push(newCostForm);
    },
    handleCityChange(e) {
      this.selectCityText = [];
      for (var i = 0; i < e.length; i++) {
        this.selectCityText.push(CodeToText[e[i]]);
      }
      console.log(this.selectCityText);
    },
    open(id) {
      this.dialog = true;
      // 有id就是修改操作
      if (id) {
        console.log(id,'修改');
        studentDetail({ id }).then(res => {
          console.log(res);
          this.form = res.data;
          this.selectCityText = res.data.cityText.split(',')
          // console.log(this.selectCitys);
        });
      } else {
        console.log(id,'新增');
        this.$refs.dataForm.resetFields();
        // this.form.name = this.form.sex = this.form.tel = this.form.classId = this.form.dormId = this.form.dormStartTime = this.form.dormEndTime = this.form.manID = this.selectCityText =
        //   "";
      }
      this.getDormList();
    },
    getDormList() {
      dormlist({
        start: 1,
        limit: 10
      }).then(res => {
        // console.log(res);
        this.dormList = res.data.list;
      });
    },
    submit() {
      this.$refs.dataForm.validate(valid => {
        if (valid) {
          // alert("submit!");
        } else {
          console.log("error submit!!");
          return false;
        }
      });
      var params = {
        xyUser: {
          name: this.form.name,
          sex: this.form.sex,
          tel: this.form.tel,
          classId: this.form.classId,
          classId: this.form.dormId,
          manID: this.form.manID,
          dormStartTime: this.form.dormStartTime,
          dormEndTime: this.form.dormEndTime,
          cityText:
            this.selectCityText[0] +
            this.selectCityText[1] +
            this.selectCityText[2]
        }
      };
      params._size = this.costList.length;
      for (var i = 0; i < this.costList.length; i++) {
        var costItem = this.costList[i];
        params["xyCostItems_" + i] = costItem;
      }

      var api = null;
      if (this.form.id) {
        api = update;
        params.xyUser.id = this.form.id;

        // params.xyUser.cityText =
      } else {
        api = newAdd;
      }
      api(params).then(res => {
        console.log(res);
        this.$message.success("保存成功");
        this.dialog = false;
        this.$emit("update");
        this.form.sex = "";
      });
    }
  }
};
</script>

<style scoped lang="scss">
.popup {
  .newdialog {
    .input {
      width: 170px;
    }
    .dialog-footer {
      margin-right: 320px;
    }
  }
}
</style>
